<template>
  <div>
    <div style="position: fixed;right: 50px;top:5px">
      <div>
        <span style="font-size: 12px;margin-right: 10px;color: black;">显示插入</span>
        <el-switch v-model="showInsert" size="small"/>
      </div>
      <div>
        <span style="font-size: 12px;margin-right: 10px;color: black;">显示查询</span>
        <el-switch v-model="showSelect" size="small"/>
      </div>
    </div>
    <div style="margin:50px auto 0">
      <div class="option" v-show="showInsert">
        <el-form v-model="buser" style="width:60%; margin: 0 auto">
          <el-form-item v-for="item in struct.slice(1)" :key="item.key" :label="item.comm" label-width="80px">
            <el-input v-model="buser[item.key]"></el-input>
          </el-form-item>
          <el-button type="primary" @click="insert">插入</el-button>
        </el-form>
      </div>
      <div class="option" v-show="showSelect">
        <el-form v-model="buser" style="width:60%; margin: 0 auto">
          <el-form-item label="id">
            <el-input v-model="buser.id"></el-input>
          </el-form-item>
          <el-button type="primary" @click="getOne">查询</el-button>
        </el-form>
        <el-table v-if="one.length" :data="one" stripe border style="width:96%;margin: 0 auto" :show-header="false">
          <el-table-column v-for="item in struct" :key="item.key" :prop="item.key" :label="item.comm"
                           align="center"></el-table-column>
        </el-table>
      </div>
      <div class="option">
        <div v-if="list.length">
          <el-table :data="list" stripe border style="width:96%;margin: 10px auto" @sort-change="sortChange">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column v-for="item in struct.slice(1)" :key="item.key" sortable="custom" :prop="item.key"
                             :label="item.comm" align="center" :show-overflow-tooltip="item.hidden" :width="item.width">
            </el-table-column>
            <el-table-column label="修改" align="center" width="100">
              <template #default="scope">
                <el-link class="data-option" type="warning" :underline="false" @click="showUpdate(scope.row)">更新
                </el-link>
                <el-dialog v-model="update.show" title="修改" :append-to-body="true">
                  <el-form v-model="update.obj" style="width:60%; margin: 0 auto">
                    <el-form-item v-for="item in struct.slice(1)" :key="item.key" :label="item.comm" label-width="80px">
                      <el-input v-model="update.obj[item.key]"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="updateOne(update.obj)">提交</el-button>
                      <el-button @click="update.show=false">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <el-link class="data-option" type="danger" :underline="false"
                         @click="deleteOne(scope.$index, scope.row)">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" @current-change="changePage" small
                         style="width: fit-content;margin: auto"
                         :total="page.total" :page-size="page.size" v-model:current-page="page.index">
          </el-pagination>
          <span style="color: black">总数:{{ page.total }}</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;width: fit-content">
      <div class="echarts" v-for="item in groupBy" :key="item.key" :id="'echarts'+item.key"></div>
    </div>
  </div>
</template>

<script>
import {deleteOne, getList, getOne, group, insert, update} from "../util/request/Buser";
import * as echarts from 'echarts'
import * as lodash from 'lodash'

export default {
  name: 'Buser',
  data() {
    return {
      struct: [
        {key: 'id', comm: 'id', hidden: true},
        {key: 'face', comm: '头像', hidden: true},
        {key: 'name', comm: '昵称', hidden: false, width: '160'},
        {key: 'sex', comm: '性别', hidden: false, width: '60'},
        {key: 'sign', comm: '签名', hidden: true,},
        {key: 'level', comm: '等级', hidden: false, width: '60'},
        {key: 'vip', comm: '会员', hidden: false, width: '120'},
        {key: 'follower', comm: '粉丝数', hidden: false, width: '100'},
        {key: 'following', comm: '关注', hidden: false, width: '60'},
        {key: 'gtime', comm: '抓取时间', hidden: false, width: '160'},
      ],
      buser: {},
      one: [],
      list: [],
      page: {size: 20, index: 1, total: 0, sort: '', asc: true},
      update: {show: false, obj: {}},
      showSelect: false,
      showInsert: false,
      groupBy: [
        {key: 'sex'},
        {key: 'level'},
        {key: 'vip'},
        {key: 'follower', rule: [0, 10000, 100000, 500000, 1000000, 2000000, 5000000, 10000000, 100000000]},
        {key: 'following', rule: [0, 100, 1000, 10000]},
      ],
      echarts: {
        color: [
          this.getColor('rgb(255, 191, 0)', 'rgb(224, 62, 76)'),
          this.getColor('rgb(128, 255, 165)', 'rgb(1, 191, 236)'),
          this.getColor('rgb(0, 221, 255)', 'rgb(77, 119, 255)'),
          this.getColor('rgb(255, 0, 135)', 'rgb(135, 0, 157)'),
          this.getColor('rgb(55, 162, 255)', 'rgb(116, 21, 219)'),
          this.getColor('rgba(0,255,255,.8)', 'rgba(255,0,255,.8)'),
        ],
        tooltip: {trigger: 'item'},
        title: {text: '', left: 'center'},
        legend: {top: '5%', left: 'center'},
        series: [{
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {show: false, position: 'center',},
          emphasis: {
            label: {
              show: true, fontSize: '40', fontWeight: 'bold'
            }
          },
          labelLine: {show: false},
          data: [],
        }
        ]
      }
    }
  },
  mounted() {
    this.struct.forEach(item => this.buser[item.key] = '')
    this.getList(0)
    this.initEcharts()
  },
  methods: {
    getColor(c1, c2) {
      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: c1}, {offset: 1, color: c2}])
    },
    initEcharts() {
      this.groupBy.forEach(item => this.group({...item, table: 'buser'}, (groupData) => {
            let option = lodash.cloneDeep(this.echarts)
            option.title.text = option.series[0].name = this.struct.find(s => s.key === item.key).comm
            groupData.forEach(g => option.series[0].data.push({name: g.key, value: g.svalue}))

            echarts.init(document.getElementById('echarts' + item.key)).setOption(option)
          })
      )
    },
    group(data, callback) {
      group(data).then((res) => {
        callback(res.data)
      })
    },
    insert() {
      let param = {}
      this.struct.forEach(item => param[item.key] = this.buser[item.key])
      insert(param).then((res) => {
        Object.keys(this.buser).forEach(item => this.buser[item] = '')
        if (res.status === 200) {
          this.$message.success('插入成功')
        } else {
          this.$message.error('插入失败')
        }
        this.getList(0)
      })
    },
    getOne() {
      getOne({id: this.buser.id}).then((res) => {
        if (this.one.length) {
          this.one.pop()
        }
        this.one.push(res.data)
        if (res.status === 200) {
          this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
      })
    },
    sortChange(prop) {
      if (prop.order && prop.prop) {
        this.page.sort = prop.prop
        this.page.asc = prop.order.startsWith('asc')
        this.getList(this.page.index - 1)
      }
    },
    getList(page) {
      getList({page, size: this.page.size, sort: this.page.sort, asc: this.page.asc}).then((res) => {
        if (this.list.length) {
          this.list = []
        }
        this.page.size = res.data.size
        this.page.total = res.data.totalElements

        res.data.content.forEach(item => this.list.push(item))
        if (res.status === 200) {
          this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
      })
    },
    changePage(p) {
      this.page.index = p
      this.getList(p - 1)
    },
    showUpdate(val) {
      let attr = Object.keys(val)
      for (let i = 0; i < attr.length; i++) {
        this.update.obj[attr[i]] = val[attr[i]]
      }
      this.update.show = true
    },
    updateOne(val) {
      let param = {}
      let attr = Object.keys(val)
      for (let i = 0; i < attr.length; i++) {
        param[attr[i]] = val[attr[i]]
      }
      update(param).then((res) => {
        this.update.show = false
        if (res.status === 200) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
        this.getList(this.page.index - 1)
      })
    },
    deleteOne(index, val) {
      deleteOne({id: val.id}).then((res) => {
        if (res.status === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
        this.getList(this.page.index - 1)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-form-item {
  margin-bottom: 5px;
}

.option {
  width: 100%;
  margin: 20px auto;
}

.data-option {
  font-size: 12px;
  margin: auto 3px;
}

.echarts {
  display: inline-block;
  width: 600px;
  height: 600px
}
</style>
